<template>
  <div style="width: 100%">
    <!-- <el-input style="display:none" v-model="ctCodeString"></el-input> -->
    <el-input
      lable="项目名称"
      :readonly="inputReadonly"
      :disabled="disabled"
      class="mis-input"
      v-model="ctNameString"
    ></el-input>
    <el-button
      :disabled="disabled"
      class="mis-button"
      icon="el-icon-more"
      @click="()=>{
        handleClick()
      }"
    ></el-button>
    <el-dialog
      :visible.sync="open"
      v-if="open"
      :title="dialogTitle"
      width="1200px"
      @close="cancel()"
      append-to-body
    >
    <el-form ref="queryForm" :inline="true" label-width="auto" class="main-form">
        <el-row :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
            <el-form-item :label="labelName" prop="ct_name">
              <el-input type="text" v-model="queryParams.ctName" @keydown.enter.native="handleQuery"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
          <div style="padding:10px">
            <!--prop="ct_fun_name"-->
            <el-table :data="noSelectedMeetingList" border :height="400">
            <el-table-column
              label="序号"
              align="center"
              header-align="center"
              type="index"
              width="120px"
            />
            <el-table-column :label="labelName" align="left" header-align="center" prop="ctName" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="80px"
            >
              <template slot-scope="scope">
                <el-button
                  size="medium"
                  type="text"
                  @click="handleUpdate(scope.row)"
                  title="选择"
                >选择</el-button>
              </template>
            </el-table-column>
          </el-table>

          </div>


      <div slot="footer">
        <!-- <el-button type="default" @click="clearAndClose">置空</el-button> -->
        <el-button type="default" @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import request from '@/utils/request'

import request from '@/utils/request'
import store from "@/store/index";
import { misRenderContent } from "@/utils";
export default {
  name: "ProjectSelect",
  props: {
    // dialog窗体的title
    dialogTitle: {
      type: String,
      default: "选择项目"
    },
    labelName: {
      type: String,
      default: "项目名称"
    },
    //树类型
    misTreeType: {
      type: [Number, String],
      default: 101
    },
    //父传Code
    setValueCode: {
      type: [Number, String],
      default: '',
    },
    //父传Name
    setValueName: {
      type: [Number, String],
      default: '',
    },
    inputReadonly: {
      type: Boolean,
      default: true
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      open: false,
      noSelectedMeetingList: [],
      tempList:[],
      ctNameString: '',
      ctCodeString: '',
      focus: false,
      queryParams:{
        ctName:''
      }
    };
  },
  created() {
  },
  watch: {
    // userName(val) {
    //   this.$refs.tree.filter(val)
    // },
    ctNameString(val) {
      if (this.focus) {
        this.ctNameString = val.replace('|', '')
        this.$emit('updateProjectSelect', val + '|' + this.ctCodeString)
      }
    },
    setValueName(val) {
      this.ctNameString = val
    },
    setValueCode(val) {
      this.ctCodeString = val
      this.defalutValue = val ? val.split(',') : []
    },
  },
  mounted() {

  },
  methods: {
    getList(){
        this.getData().then((response) => {
          this.noSelectedMeetingList = response.data
          this.tempList = response.data
        })
    },
    getData(){
       return request({
        method: 'get',
        url: 'spspublic/treeview/'+this.misTreeType,
      })
    },
    handleReset() {
      this.queryParams={
        ctName:null,
      }
      this.handleQuery()
    },
    handleQuery(){
        let name = this.queryParams.ctName
        if(name){
          let arr = this.tempList.filter((item)=>item.ctName.indexOf(name)!=-1)
          this.noSelectedMeetingList=[...arr]
        }else{
          this.noSelectedMeetingList = [...this.tempList]
        }
   },
    close(){
      this.open=false;
    },
    cancel() {
      this.open=false;
    },
    handleClick() {
      this.open = true;
      this.getList();
    },
     clearAndClose() {
      this.ctNameString = ''
      this.ctCodeString = ''
      this.$emit(
        'updateProjectSelect',
        this.ctNameString + '|' + this.ctCodeString
      )
      this.open = false
    },
    handleUpdate(row){
        this.ctCodeString = row.ctCode
        this.ctNameString = row.ctName
        this.$emit('updateProjectSelect',this.ctNameString + '|' + this.ctCodeString)
        this.close();
    },


  }
};
</script>
<style lang="scss" scoped>
.mis-input {
  width: calc(100% - 60px);
  float: left;
}
.mis-button {
  float: right;
}
.tree-li {
  cursor: pointer;
}
.main-form{
  margin-left: 10px;
  .el-form-item{
    margin-bottom: 0px
  }
}
</style>

